iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
Mobile Development

Jetpack Compose 從心開始系列 第 26

Jetpack Compose 從心開始 Day26 - 開發與偵錯

  • 分享至 

  • xImage
  •  

前言

   Compose 的 Preview 在程式撰寫的時候很好用,但最後還是要run 在實機上面,那也有好的用的工具嗎?

即時編輯功能

前往設定啟用即時編輯功能。

  • 在 Windows 或 Linux 上,瀏覽至 [檔案] >「設定」>「編輯者」> 即時編輯:
  • 在 macOS 上,依序前往「Android Studio」>「設定」>「編輯者」> 即時編輯:

https://ithelp.ithome.com.tw/upload/images/20241006/20121643H33U8nZ6If.png

在 view -> Tool Windows -> Running Devices -> 選擇你的連結裝置
https://ithelp.ithome.com.tw/upload/images/20241006/2012164362TR6JeIiJ.png

如果沒有開啟"即時編輯",右上角會有提示
https://ithelp.ithome.com.tw/upload/images/20241006/20121643I08sRG5sUl.png

這樣邊在編輯框修改UI , 實機上也會直接改變

https://ithelp.ithome.com.tw/upload/images/20241006/20121643RwFMHb41jV.png

使用版面配置檢查器對版面配置偵錯

Layout Inspector:
檢查 UI 布局的層級結構、約束條件和測量結果。
https://ithelp.ithome.com.tw/upload/images/20241006/2012164333xFaUTMjA.png

取得重組次數
對 Compose 版面配置進行偵錯時,如要瞭解 UI 的實作方式是否正確,必須知道可組合項的重組時機。
https://ithelp.ithome.com.tw/upload/images/20241006/20121643OK3dmgjXVi.png

心得

有時程式沒處理好會不斷的重畫UI,這時用 Layout Inspector 可以很快的debug


上一篇
Jetpack Compose 從心開始 Day25 - 使用可組合項預覽預覽 UI
下一篇
Jetpack Compose 從心開始 Day27 - Relay
系列文
Jetpack Compose 從心開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言